<template>
    <div class="sc-home">
        <!-- 顶部图表 -->
        <div class="top">
            <ul class="chart-list flex-row-sb-c">
                <li class="li-1">
                    <div class="title flex-row-sb-c">
                        <span>学生总数</span>
                        <el-tooltip content="学生总人数" placement="top">
                            <span class="saasIcon">&#xe619;</span>
                        </el-tooltip>
                    </div>
                    <count-to :start-val="0" :end-val="counts.studentCount" :duration="3000" class="chart-num" />
                    <!-- <div class="bottom-total">
                        <ul class="amount-change flex-row">
                            <li class="flex-row">
                                <span>周同比</span>
                                <div class="num"><span class="saasIcon add">&#xeb6e;</span> 12%</div>
                            </li>
                            <li class="flex-row" style="margin-left:15px">
                                <span>日环比</span>
                                <div class="num"><span class="saasIcon lose">&#xeb6d;</span> 12%</div>
                            </li>
                        </ul>
                    </div> -->
                </li>
                <li class="li-2">
                    <div class="title flex-row-sb-c">
                        <span>家长总数</span>
                        <el-tooltip content="家长总人数" placement="top">
                            <span class="saasIcon">&#xe619;</span>
                        </el-tooltip>
                    </div>
                    <count-to :start-val="0" :end-val="counts.studentParentCount" :duration="3000" class="chart-num" />
                    <!-- 图表 -->
                    <!-- <div class="bottom-chart" ref="top-chart-1"></div> -->
                </li>
                <li class="li-3">
                    <div class="title flex-row-sb-c">
                        <span>教师总数</span>
                        <el-tooltip content="教师总人数" placement="top">
                            <span class="saasIcon">&#xe619;</span>
                        </el-tooltip>
                    </div>
                    <count-to :start-val="0" :end-val="counts.memberCount" :duration="3000" class="chart-num" />
                    <!-- 图表 -->
                    <!-- <div class="bottom-chart" ref="top-chart-2"></div> -->
                </li>
                <li class="li-4">
                    <div class="title flex-row-sb-c">
                        <span>请假人数</span>
                        <el-tooltip content="请假总人数" placement="top">
                            <span class="saasIcon">&#xe619;</span>
                        </el-tooltip>
                    </div>
                    <count-to :start-val="0" :end-val="counts.holidayCount" :duration="3000" class="chart-num" />
                    <!-- 图表 -->
                    <!-- <div class="bottom-chart" ref="top-chart-2"></div> -->
                </li>
                <li class="li-5">
                    <div class="title flex-row-sb-c">
                        <span>异常体温</span>
                        <el-tooltip content="异常体温人数" placement="top">
                            <span class="saasIcon">&#xe619;</span>
                        </el-tooltip>
                    </div>
                    <!--                    <count-to :start-val="0" :end-val="counts.memberCount" :duration="3000" class="chart-num" />-->
                    <span class="chart-num">--</span>
                    <!-- 图表 -->
                    <!-- <div class="bottom-chart" ref="top-chart-2"></div> -->
                </li>
                <!-- <li class="li-4">
                    <div class="title flex-row-sb-c">
                        <span>销售总数</span
                        ><el-tooltip content="家长总数" placement="top">
                            <span class="saasIcon">&#xe619;</span>
                        </el-tooltip>
                    </div>
                    <div class="li-4-bottom flex-row">
                        <div class="left flex-row-l chart-num">
                            <count-to :start-val="0" :end-val="75" :duration="3000" />
                            <span>%</span>
                        </div>
                        <div class="right" ref="top-chart-3"></div>
                    </div>
                </li> -->
                <!-- <li class="li-5">
                    <div class="title flex-row-sb-c">
                        <span>成交订单</span
                        ><el-tooltip content="家长总数" placement="top">
                            <span class="saasIcon">&#xe619;</span>
                        </el-tooltip>
                    </div>
                    <div class=" flex-row-l chart-num">
                        <count-to :start-val="0" :end-val="80" :duration="3000" />
                        <span>%</span>
                    </div>
                    <div class="bottom-progress ">
                        <el-progress :text-inside="true" :stroke-width="16" :percentage="80"></el-progress>
                    </div>
                </li> -->
            </ul>
        </div>

        <!-- 下部分表格图表 -->
        <div class="bottom flex-row">
            <div class="bottom-left">
                <!-- 数据简报 -->
                <div v-if="false" class="left-1 box">
                    <Title>数据简报</Title>
                    <div class="main">
                        <ul class="flex-row">
                            <li class="flex-col-c-c">
                                <span class="title">新增学生</span>
                                <count-to :start-val="0" :end-val="500" :duration="3000" class="bottom-count-to" />
                                <div class="num"><span class="lose">-12%</span></div>
                                <!-- <div class="num"><span class=" add">56%</span></div> -->
                            </li>
                            <li class="flex-col-c-c">
                                <span class="title">新增学生</span>
                                <count-to :start-val="0" :end-val="500" :duration="3000" class="bottom-count-to" />
                                <div class="num"><span class="lose">-12%</span></div>
                                <!-- <div class="num"><span class=" add">56%</span></div> -->
                            </li>
                            <li class="flex-col-c-c">
                                <span class="title">新增学生</span>
                                <count-to :start-val="0" :end-val="500" :duration="3000" class="bottom-count-to" />
                                <!-- <div class="num"><span class="lose">-12%</span></div> -->
                                <div class="num"><span class="add">56%</span></div>
                            </li>
                            <li class="flex-col-c-c">
                                <span class="title">新增学生</span>
                                <count-to :start-val="0" :end-val="500" :duration="3000" class="bottom-count-to" />
                                <div class="num"><span class="lose">-12%</span></div>
                                <!-- <div class="num"><span class=" add">56%</span></div> -->
                            </li>
                            <li class="flex-col-c-c">
                                <span class="title">新增学生</span>
                                <count-to :start-val="0" :end-val="500" :duration="3000" class="bottom-count-to" />
                                <!-- <div class="num"><span class="lose">-12%</span></div> -->
                                <div class="num"><span class="add">56%</span></div>
                            </li>
                            <li class="flex-col-c-c">
                                <span class="title">新增学生</span>
                                <count-to :start-val="0" :end-val="500" :duration="3000" class="bottom-count-to" />
                                <div class="num"><span class="lose">-12%</span></div>
                                <!-- <div class="num"><span class=" add">56%</span></div> -->
                            </li>
                            <li class="flex-col-c-c">
                                <span class="title">新增学生</span>
                                <count-to :start-val="0" :end-val="500" :duration="3000" class="bottom-count-to" />
                                <div class="num"><span class="lose">-12%</span></div>
                                <!-- <div class="num"><span class=" add">56%</span></div> -->
                            </li>
                            <li class="flex-col-c-c">
                                <span class="title">新增学生</span>
                                <count-to :start-val="0" :end-val="500" :duration="3000" class="bottom-count-to" />
                                <div class="num"><span class="lose">-12%</span></div>
                                <!-- <div class="num"><span class=" add">56%</span></div> -->
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- 充值趋势 -->
                <!-- <div class="left-2 box " style="margin-top:13px">
                    <Title>充值趋势</Title>
                    <div class="main">
                        <div class="chart" ref="bottom-left-chart-2"></div>
                    </div>
                </div> -->

                <!-- 请假列表 -->
                <div class="left-2 box" style="margin-top: 13px">
                    <Title>请假列表</Title>
                    <div class="main-table">
                        <el-table :height="420" :data="leaveTableData" style="width: 100%">
                            <el-table-column type="index" label="序号" width="50">
                                <template slot-scope="scope">
                                    <div class="tab-num flex-row-c-c">
                                        <span>{{ scope.$index + 1 }}</span>
                                    </div>
                                </template>
                            </el-table-column>

                            <el-table-column prop="studentName" label="姓名" align="center" width="80"></el-table-column>
                            <el-table-column prop="levelName" label="班级" align="center" width="80"></el-table-column>
                            <el-table-column prop="applyReason" label="请假原因" align="left" width="300">
                                <span slot-scope="{ row }">
                                    <el-link type="info" @click="handleShowDetail(row.applyReason)" v-if="row.applyReason"
                                        >{{ row.applyReason.substring(0, 15) }}{{ row.applyReason.length > 15 ? "..." : "" }}</el-link
                                    >
                                    <span v-else>/</span>
                                </span>
                            </el-table-column>
                            <!-- <el-table-column prop="applyUserName" label="申请人姓名" align="center" width="100"> </el-table-column> -->
                            <el-table-column prop="reviewName" label="审批人" align="center" width="80"></el-table-column>
                            <!-- 审核状态 0:未审核, 1.审核通过, 2.审核驳回 -->
                            <el-table-column prop="approveStatus" label="审核状态" align="center">
                                <span slot-scope="{ row }">
                                    <el-tag type="success" v-if="row.approveStatus === 1">审核通过</el-tag>
                                    <el-tag type="danger" v-else-if="row.approveStatus === 2">审核驳回</el-tag>
                                    <el-tag type="info" v-else>未审核</el-tag>
                                </span>
                            </el-table-column>
                            <el-table-column prop="approveResult" label="审批结果" align="left" width="300">
                                <span slot-scope="{ row }">
                                    <el-link type="info" @click="handleShowaApproveResult(row.approveResult)" v-if="row.approveResult"
                                        >{{ row.approveResult.substring(0, 15) }}{{ row.approveResult.length > 15 ? "..." : "" }}</el-link
                                    >
                                    <span v-else>/</span>
                                </span>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <!-- 校园进出 -->
                <div class="left-3 box" style="margin-top: 13px">
                    <Title>校园通知</Title>
                    <!-- <ul class="new-list">
                        <li class="new-item flex-row-sb-c" v-for="(item, index) in noticTableData" :key="index">
                            <div class="left del-text">{{ item.noticeTitle }}</div>
                            <div class="right">开始时间：{{ item.noticeStartTime || "/" }}</div>
                            <div class="right">结束时间：{{ item.noticeEndTime || "/" }}</div>
                        </li>
                    </ul> -->
                    <div class="main-table">
                        <el-table :height="420" :data="noticTableData" style="width: 100%">
                            <el-table-column type="index" label="序号" width="50">
                                <template slot-scope="scope">
                                    <div class="tab-num flex-row-c-c">
                                        <span>{{ scope.$index + 1 }}</span>
                                    </div>
                                </template>
                            </el-table-column>

                            <el-table-column prop="noticeTitle" label="通知标题" align="center"></el-table-column>
                            <el-table-column prop="noticeStartTime" label="开始时间" align="center"></el-table-column>
                            <el-table-column prop="noticeEndTime" label="结束时间" align="center"></el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>

            <div class="bottom-right">
                <div class="right-1 box">
                    <Title>校园进出</Title>
                    <div class="main-table">
                        <el-table :height="920" :data="hikMessageData" style="width: 100%; padding-left: 15px">
                            <!-- <el-table-column type="index" label="序号" width="50">
                                <template slot-scope="scope">
                                    <div class="tab-num flex-row-c-c" :style="{ backgroundColor: scope.$index < 3 ? 'rgba(255, 153, 0, 1)' : '' }">
                                        <span>{{ scope.$index + 1 }}</span>
                                    </div>
                                </template>
                            </el-table-column> -->

                            <el-table-column prop="personName" label="姓名" align="center" width="70"></el-table-column>
                            <el-table-column prop="bodyTemperature" label="体温" align="center" width="60"></el-table-column>
                            <!-- <el-table-column prop="healthCode" label="健康码" align="center" width="70">
                                <span slot-scope="{ row }">
                                    <el-tag type="success" v-if="row.healthCode === 0">绿码</el-tag>
                                    <el-tag type="warning" v-else-if="row.healthCode === 1">黄码</el-tag>
                                    <el-tag type="danger" v-else-if="row.healthCode === 2">红码</el-tag>
                                    <el-tag type="info" v-else>未申领</el-tag>
                                </span>
                            </el-table-column>
                            <el-table-column prop="personType" label="人员类型" align="center" width="70">
                                <span slot-scope="{ row }">
                                    <el-tag type="success" v-if="row.personType === 1">教职工</el-tag>
                                    <el-tag type="danger" v-else-if="row.personType === 2">学生</el-tag>
                                    <el-tag type="warning" v-else-if="row.personType === 3">家长</el-tag>
                                    <el-tag type="info" v-else>未知</el-tag>
                                </span>
                            </el-table-column> -->
                            <el-table-column prop="outInType" label="出入类型" align="center" width="70">
                                <span slot-scope="{ row }">
                                    <el-tag type="success" v-if="row.outInType === 0">入门</el-tag>
                                    <el-tag type="danger" v-else-if="row.outInType === 1">出门</el-tag>
                                    <el-tag type="info" v-else>未知</el-tag>
                                </span>
                            </el-table-column>
                            <el-table-column prop="createTime" label="闸机时间" align="center" width="140"></el-table-column>
                            <el-table-column prop="msgInfo" label="消息" align="center" width="200">
                                <span slot-scope="{ row }">
                                    <el-link type="info" @click="handleMsgInfo(row.msgInfo)" v-if="row.msgInfo"
                                        >{{ row.msgInfo.substring(0, 15) }}{{ row.msgInfo.length > 15 ? "..." : "" }}</el-link
                                    >
                                    <span v-else>/</span>
                                </span>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>

                <!-- <div class="right-2 box">
                    <Title>合作单位</Title>
                    <div class="main-table">
                        <ul class="project-list">
                            <li
                                class="project-item  flex-col-c-c"
                                @mouseenter="currentIndex = index"
                                @mouseleave="currentIndex = ''"
                                v-for="(item, index) in 12"
                                :key="index"
                                :class="[currentIndex === index ? 'move' : '']"
                            >
                                <span class="saasIcon">&#xe617;</span>
                                <span class="title">腾讯智慧校园</span>
                            </li>
                        </ul>
                    </div>
                </div> -->
                <!-- 新鲜事 -->
                <!-- <div class="right-3 box">
                    <Title>校园通知</Title>
                    <ul class="new-list">
                        <li class="new-item flex-row-sb-c" v-for="(item, index) in 20" :key="index">
                            <div class="left del-text">李同李同学荣获惠州市文状元李同学荣获惠州市文状元李同学荣获惠州市文状元学荣获惠州市文状元</div>
                            <div class="right">2021 10-22 11:20:37</div>
                        </li>
                    </ul>
                </div> -->
            </div>
        </div>

        <el-dialog title="请假详情" v-dialogdrag :visible.sync="showApplyReasonDetail" width="40%">
            <el-card class="box-card" shadow="hover">
                {{ applyReasonDetail }}
            </el-card>
            <span slot="footer">
                <el-button @click="showApplyReasonDetail = false">关 闭</el-button>
            </span>
        </el-dialog>

        <el-dialog title="审批结果" v-dialogdrag :visible.sync="showapproveResult" width="40%">
            <el-card class="box-card" shadow="hover">
                {{ approveResult }}
            </el-card>
            <span slot="footer">
                <el-button @click="showapproveResult = false">关 闭</el-button>
            </span>
        </el-dialog>

        <el-dialog title="消息" v-dialogdrag :visible.sync="showMsgInfo" width="40%">
            <el-card class="box-card" shadow="hover">
                {{ msgInfo }}
            </el-card>
            <span slot="footer">
                <el-button @click="showMsgInfo = false">关 闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import Title from "./components/title";
import * as Echarts from "echarts";

let timeOut = null;
export default {
    components: { Title },
    data() {
        return {
            counts: {},
            currentIndex: "", //当前选中索引
            chart: {
                topChart1: "",
                topChart2: "",
                topChart3: "",
                bottomLeftChart2: "",
            },
            leaveTableData: [],
            showApplyReasonDetail: false,
            applyReasonDetail: "",
            showapproveResult: false,
            approveResult: "",
            showMsgInfo: false,
            msgInfo: "",
            noticTableData: [],
            hikMessageData: [],
        };
    },
    mounted() {
        this.getPersonnelPount();
        this.getCampusNoticeList();
        this.getHikMessageList();
        this.getStudentApprove();
        // this.topChartInIt(); //挂在图表

        timeOut = setInterval(() => {
            this.getHikMessageList();
            this.getStudentApprove();
            this.$notify({
                title: "数据已刷新",
                type: "success", //success, warning, info, error
                duration: 2000,
            });
        }, 1000 * 180);
    },
    beforeRouteLeave(to, from, next) {
        clearInterval(timeOut);
        next();
    },
    methods: {
        // 获取学校人员统计
        async getPersonnelPount() {
            let { code, data } = await this.$api.dashboard.dashboard.getPersonnelPount({ id: this.$store.state.team.currTeam.id });
            if (code === 200) {
                this.counts = data;
            }
        },
        // 获取请假列表
        async getStudentApprove() {
            let { code, data } = await this.$api.studentLeave.leaveList.getStudentApproveList({ limit: 100, page: 1 });
            this.leaveTableData = data.records;
        },

        // 请假详情
        handleShowDetail(detail) {
            this.showApplyReasonDetail = true;
            this.applyReasonDetail = detail;
        },
        // 审批结果
        handleShowaApproveResult(detail) {
            this.showapproveResult = true;
            this.approveResult = detail;
        },
        // 消息
        handleMsgInfo(detail) {
            this.showMsgInfo = true;
            this.msgInfo = detail;
        },

        // 获取通知列表
        async getCampusNoticeList() {
            let { code, data } = await this.$api.schoolApplication.schoolMessage.getCampusNoticeList({ limit: 100, page: 1 });
            this.noticTableData = data.records;
        },

        // 获取日志列表
        async getHikMessageList() {
            let { code, data } = await this.$api.schoolConfig.hikMessage.getHikMessageList({ limit: 100, page: 1 });
            this.hikMessageData = data.records;
        },

        // 顶部图表初始化
        topChartInIt() {
            this.topChart1();
            this.topChart2();
            // this.topChart3();
            // this.bottomLeftChart2();
            // this.bottomLeftChart3();
            // this.bottomLeftChart4();
        },
        topChart1() {
            this.chart.topChart1 = Echarts.init(this.$refs["top-chart-1"]);
            // 绘制图表
            const option = {
                tooltip: {
                    trigger: "item",
                    formatter: (params) => {
                        return `${params.name}:${params.data}`;
                    },
                },
                xAxis: {
                    show: false,
                    type: "category",
                    boundaryGap: false,
                    data: [
                        "周一",
                        "周一",
                        "周一",
                        "周一",
                        "周一",
                        "周一",
                        "周一",
                        "周一",
                        "周一",
                        "周一",
                        "周一",
                        "周一",
                        "周一",
                        "周一",
                        "周一",
                        "周一",
                        "周一",
                    ],

                    axisLine: {
                        //坐标轴轴线相关设置。
                        show: false,
                    },
                    axisTick: {
                        //坐标轴刻度相关设置。
                        show: false,
                    },
                    axisLabel: {
                        //坐标轴刻度标签的相关设置。
                        color: "#BCBCBC",
                        fontSize: 9,
                    },
                },
                grid: {
                    right: 0,
                    top: 0,
                    left: 0,
                    bottom: 0,
                },
                yAxis: {
                    type: "value",
                    // 分隔线
                    splitLine: {
                        show: false,
                    },
                    // 坐标轴轴线
                    axisLine: {
                        show: false,
                    },
                    // 坐标轴刻度
                    axisTick: {
                        show: false,
                    },
                    // 刻度标签
                    axisLabel: {
                        show: false,
                    },
                },
                series: [
                    {
                        symbol: "none", //取消小圆点
                        step: false,
                        data: [1, 3, 2, 4, 3, 5, 4, 4, 5, 4, 5, 2, 2, 2, 5, 4, 7],
                        type: "line",
                        areaStyle: {
                            //区域填充样式。设置后显示成区域面积图。
                            color: "#FF7A8C",
                            opacity: 1,
                        },
                        emphasis: {
                            //折线图的高亮状态
                        },
                        lineStyle: {
                            //线条样式。
                            color: "#FF7A8C",
                        },
                        itemStyle: {
                            //折线拐点标志的样式
                            color: "#FF7A8C",
                            borderColor: "#FF7A8C",
                        },
                        labelLine: {
                            show: false,
                        },
                    },
                ],
            };
            this.chart.topChart1.setOption(option);
        },
        topChart2() {
            this.chart.topChart2 = Echarts.init(this.$refs["top-chart-2"]);
            // 绘制图表
            const option = {
                tooltip: {
                    trigger: "item",
                    formatter: (params) => {
                        return `${params.name}:${params.data}`;
                    },
                },
                xAxis: {
                    show: false,
                    type: "category",
                    boundaryGap: false,
                    data: [
                        "周一",
                        "周一",
                        "周一",
                        "周一",
                        "周一",
                        "周一",
                        "周一",
                        "周一",
                        "周一",
                        "周一",
                        "周一",
                        "周一",
                        "周一",
                        "周一",
                        "周一",
                        "周一",
                        "周一",
                    ],

                    axisLine: {
                        //坐标轴轴线相关设置。
                        show: false,
                    },
                    axisTick: {
                        //坐标轴刻度相关设置。
                        show: false,
                    },
                    axisLabel: {
                        //坐标轴刻度标签的相关设置。
                        color: "#BCBCBC",
                        fontSize: 9,
                    },
                },
                grid: {
                    right: 0,
                    top: 0,
                    left: 0,
                    bottom: 0,
                },
                yAxis: {
                    type: "value",
                    // 分隔线
                    splitLine: {
                        show: false,
                    },
                    // 坐标轴轴线
                    axisLine: {
                        show: false,
                    },
                    // 坐标轴刻度
                    axisTick: {
                        show: false,
                    },
                    // 刻度标签
                    axisLabel: {
                        show: false,
                    },
                },
                series: [
                    {
                        symbol: "none", //取消小圆点
                        step: false,
                        data: [1, 3, 2, 4, 3, 5, 4, 4, 5, 4, 5, 2, 2, 2, 5, 4, 7],
                        type: "bar",
                        areaStyle: {
                            //区域填充样式。设置后显示成区域面积图。
                            color: "#52C1F5",
                            opacity: 1,
                        },
                        emphasis: {
                            //折线图的高亮状态
                        },
                        lineStyle: {
                            //线条样式。
                            color: "#52C1F5",
                        },
                        itemStyle: {
                            //折线拐点标志的样式
                            color: "#52C1F5",
                            borderColor: "#52C1F5",
                        },
                        labelLine: {
                            show: false,
                        },
                    },
                ],
            };
            this.chart.topChart2.setOption(option);
        },
        topChart3() {
            this.chart.topChart3 = Echarts.init(this.$refs["top-chart-3"]);
            //反方向剩下部分的样式
            const BorderWidth = "8";
            const placeHolderStyle = {
                normal: {
                    label: {
                        show: false,
                        position: "outside",
                    },
                    labelLine: {
                        show: false,
                        length: 100,
                        smooth: 0.5,
                    },
                    /* color: "rgba(0,0,0,0)",
         borderColor: "rgba(0,0,0,0)",*/
                    borderWidth: BorderWidth,
                    /*shadowBlur: 40,*/
                    borderColor: "#E9E9E9",
                },
                /*    emphasis: {
                    color: "#dedede",
                    borderColor: "#dedede",
                    borderWidth: 0
                } */
            };
            // 绘制图表
            const option = {
                tooltip: {
                    trigger: "item",
                    formatter: (params) => {
                        return `${params.data.name} : ${(params.data.value / (100 + 200)).toFixed(1) * 100}%`;
                    },
                },
                title: {
                    /*subtext: '纯属虚构',*/
                    left: "center",
                },
                series: [
                    {
                        name: "产品销售",
                        type: "pie",
                        clockWise: true,
                        hoverAnimation: false,
                        radius: ["80%", "75%"],
                        itemStyle: {
                            normal: {
                                label: {
                                    show: false,
                                },
                                labelLine: {
                                    show: false,
                                    length: 100,
                                    smooth: 0.5,
                                },
                                borderWidth: BorderWidth,
                                /* shadowBlur: 40,*/
                                borderColor: "#0099FF",
                                /*  shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影*/
                            },
                        },
                        data: [
                            {
                                value: 200,
                                name: "销售总数",
                            },
                            {
                                value: 100,
                                name: "未销售",
                                itemStyle: placeHolderStyle,
                            },
                        ],
                    },
                ],
            };
            this.chart.topChart3.setOption(option);
        },
        bottomLeftChart2() {
            this.chart.bottomLeftChart2 = Echarts.init(this.$refs["bottom-left-chart-2"]);
            // 绘制图表
            const grid = {
                right: 30,
                top: 20,
                left: 30,
                bottom: 50,
            };
            const option = {
                grid,
                tooltip: {
                    trigger: "axis",
                },
                legend: {
                    show: true,
                    data: ["预计销售金额", "概率金额"],
                    top: "bottom",
                    itemWidth: 10,
                    itemHeight: 10,
                },

                calculable: true,
                xAxis: [
                    {
                        type: "category",
                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
                        axisLabel: {
                            color: "#8A8A8A",
                        },

                        axisLine: {
                            lineStyle: {
                                color: "#8A8A8A",
                            },
                        },
                    },
                ],
                yAxis: [
                    {
                        show: true,
                        type: "value",
                        axisLine: {
                            show: false,
                        },
                        axisLabel: {
                            color: "#8A8A8A",
                        },
                        splitLine: {
                            // show: false,
                            lineStyle: {
                                color: ["#EAEAEA"],
                                type: "dashed",
                            },
                        },
                    },
                ],
                series: [
                    {
                        name: "预计销售金额",
                        type: "bar",
                        data: [21, 23, 34, 12, 34, 23, 54, 21, 56, 23, 12, 34],
                        color: "#6AC9F6",
                    },
                    {
                        name: "概率金额",
                        type: "bar",
                        data: [22, 12, 23, 34, 12, 23, 54, 44, 12, 23, 34, 12],
                        color: "#95DB9A",
                    },
                ],
            };
            this.chart.bottomLeftChart2.setOption(option);
        },
        bottomLeftChart3() {
            this.chart.bottomLeftChart3 = Echarts.init(this.$refs["bottom-left-chart-3"]);
            // 绘制图表
            const grid = {
                right: 30,
                top: 20,
                left: 30,
                bottom: 50,
            };
            const option = {
                grid,
                tooltip: {
                    trigger: "axis",
                },
                legend: {
                    show: true,
                    data: ["预计销售金额", "概率金额"],
                    top: "bottom",
                    itemWidth: 10,
                    itemHeight: 10,
                },

                calculable: true,
                xAxis: [
                    {
                        type: "category",
                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
                        axisLabel: {
                            color: "#8A8A8A",
                        },

                        axisLine: {
                            lineStyle: {
                                color: "#8A8A8A",
                            },
                        },
                    },
                ],
                yAxis: [
                    {
                        show: true,
                        type: "value",
                        axisLine: {
                            show: false,
                        },
                        axisLabel: {
                            color: "#8A8A8A",
                        },
                        splitLine: {
                            // show: false,
                            lineStyle: {
                                color: ["#EAEAEA"],
                                type: "dashed",
                            },
                        },
                    },
                ],
                series: [
                    {
                        name: "预计销售金额",
                        type: "bar",
                        data: [21, 23, 34, 12, 34, 23, 54, 21, 56, 23, 12, 34],
                        color: "#FD8D9D",
                    },
                    {
                        name: "概率金额",
                        type: "bar",
                        data: [22, 12, 23, 34, 12, 23, 54, 44, 12, 23, 34, 12],
                        color: "#88AEFB",
                    },
                ],
            };
            this.chart.bottomLeftChart3.setOption(option);
        },
        bottomLeftChart4() {
            this.chart.bottomLeftChart4 = Echarts.init(this.$refs["bottom-left-chart-4"]);
            // 绘制图表
            const data = [
                { value: 123, name: "总会员数" },
                { value: 342, name: "消费会员数" },
                { value: 50, name: "到店会员数" },
                { value: 342, name: "消费会员数" },
                { value: 342, name: "消费会员数" },
            ];
            const option = {
                tooltip: {
                    trigger: "item",
                    formatter: ({ data }) => {
                        return `${data.name}:${data.value}`;
                    },
                },
                series: [
                    {
                        radius: "100%",
                        type: "funnel",
                        right: 120,
                        top: 0,
                        left: 120,
                        bottom: 0,
                        min: 0,
                        max: 100,
                        minSize: "0%",
                        maxSize: "100%",
                        sort: "descending",
                        gap: 2,
                        label: {
                            show: true,
                            position: "right",
                            // position: "inside",
                            // formatter: e => {
                            //     let dataTotal = 0;
                            //     option.series[0].data.forEach(({ value }) => {
                            //         dataTotal += value;
                            //     });
                            //     return ((e.value / dataTotal) * 100).toFixed(2) + "%";
                            // },
                            // color: "#fff"
                        },
                        toolbox: {
                            show: true,
                        },
                        labelLine: {
                            length: 20,
                            lineStyle: {
                                width: 1,
                                type: "solid",
                            },
                        },
                        itemStyle: {
                            opacity: 0.7,
                            color: (params) => {
                                const colorList = ["#45D9DA", "#FEC95A", "#6CCAF6", "#95DB9A", "#FF8E9D"];
                                return colorList[params.dataIndex];
                            },
                        },
                        emphasis: {
                            label: {
                                fontSize: 20,
                            },
                        },
                        data,
                    },
                    {
                        radius: "100%",
                        type: "funnel",
                        right: 120,
                        top: 0,
                        left: 120,
                        bottom: 0,
                        min: 0,
                        max: 100,
                        minSize: "0%",
                        maxSize: "100%",
                        sort: "descending",
                        gap: 2,
                        label: {
                            position: "inside",
                            formatter: (e) => {
                                let dataTotal = 0;
                                option.series[0].data.forEach(({ value }) => {
                                    dataTotal += value;
                                });
                                return ((e.value / dataTotal) * 100).toFixed(0) + "%";
                            },
                            color: "#fff",
                        },
                        toolbox: {
                            show: true,
                        },
                        labelLine: {
                            length: 10,
                            lineStyle: {
                                width: 1,
                                type: "solid",
                            },
                        },
                        itemStyle: {
                            opacity: 0.7,
                            color: (params) => {
                                const colorList = ["#45D9DA", "#FEC95A", "#6CCAF6", "#95DB9A", "#FF8E9D"];
                                return colorList[params.dataIndex];
                            },
                        },
                        emphasis: {
                            label: {
                                fontSize: 20,
                            },
                        },
                        data,
                    },
                ],
            };
            this.chart.bottomLeftChart4.setOption(option);
        },
    },
};
</script>
<style lang="scss" scoped>
.sc-home {
    /*background-color: #fff;*/
    padding: 10px;

    .top {
        .chart-list {
            margin-left: -10px;

            li[class*="li-"] {
                margin-left: 10px;
                // height: 160px;
                height: 100px;
                padding: 15px;
                // width: 288px;
                width: 32.8%;
                box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
                border-radius: 10px;
                color: $t-color-2;
                background-color: #fff;
                display: flex;
                flex-direction: column;
                align-items: flex-start;

                &.li-4 {
                    padding-bottom: 5px;
                }

                .title {
                    height: 31px;
                    width: 100%;
                    font-size: 14px;

                    .saasIcon {
                        cursor: pointer;
                        color: $t-color-2;
                        font-size: 20px;
                        font-weight: bold;
                    }
                }

                .chart-num {
                    width: 100%;
                    color: #000;
                    font-size: 30px;
                    font-weight: bold;
                }
            }

            .li-4 {
                .li-4-bottom {
                    flex: 1;
                    width: 100%;

                    .left,
                    .right {
                        height: 100%;
                    }

                    .left {
                        width: 85px;
                    }

                    .right {
                        flex: 1;
                    }
                }
            }

            .bottom-chart {
                flex: 1;
                width: 100%;
            }

            .bottom-progress {
                padding-top: 25px;
                flex: 1;
                width: 100%;
            }

            .bottom-total {
                flex: 1;
                width: 100%;

                .amount-change {
                    padding-top: 20px;

                    li {
                        font-size: 14px;
                        flex: 1;

                        .saasIcon {
                            font-size: 10px;

                            &.add {
                                color: #f56c6c;
                            }

                            &.lose {
                                color: #19be6b;
                            }
                        }
                    }
                }
            }
        }
    }

    .bottom {
        // margin-top: 15px;
        display: flex;

        .box {
            border: 1px solid rgba(233, 233, 233, 1);
            border-radius: 10px;
            box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        .bottom-left {
            width: 66.5%;
            margin-right: 12px;

            .left-1 {
                background-color: #fff;

                .main {
                    border-top: 1px solid rgba(233, 233, 233, 1);
                    padding: 20px 30px;

                    ul {
                        flex-wrap: wrap;
                        margin-top: -15px;

                        li {
                            margin-top: 15px;
                            flex-shrink: 0;
                            height: 110px;
                            width: 25%;
                            border-right: 1px solid #f3f3f3;

                            &:nth-child(4n) {
                                border: none;
                            }

                            .title {
                                font-size: 14px;
                                color: $t-color-2;
                            }

                            .bottom-count-to {
                                font-size: 28px;
                                margin-top: 5px;
                                color: #666666;
                                font-weight: bold;
                            }

                            .num {
                                margin-top: 5px;
                                font-size: 11px;

                                span {
                                    &.add {
                                        color: #19be6b;
                                    }

                                    &.lose {
                                        color: #f56c6c;
                                    }
                                }
                            }
                        }
                    }
                }
            }

            .left-2 {
                background-color: #fff;

                .main {
                    border-top: 1px solid rgba(233, 233, 233, 1);
                    padding: 20px 30px;

                    .chart {
                        height: 300px;
                    }
                }
            }

            .left-3 {
                background-color: #fff;

                .main {
                    border-top: 1px solid rgba(233, 233, 233, 1);
                    padding: 20px 30px;

                    .chart {
                        height: 300px;
                    }
                }

                .new-list {
                    height: 411px;
                    overflow-y: auto;
                    padding: 15px;
                    background-color: #fff;

                    .new-item {
                        width: 100%;
                        cursor: pointer;
                        height: 50px;

                        .left {
                            max-width: 600px;
                            color: $t-color-1;
                            font-size: 14px;
                            width: 100%;
                        }

                        .right {
                            color: $t-color-2;
                            font-size: 12px;
                            width: 100%;
                        }
                    }
                }
            }
        }

        .bottom-right {
            width: 33%;
            // height: 200px;
            // background: #ccc;
            margin-top: 10px;

            .right-1 {
                .tab-num {
                    width: 23px;
                    height: 23px;
                    background-color: rgba(204, 204, 204, 1);
                    border-radius: 5px;
                    color: #fff;
                    font-weight: bold;
                }
            }

            .right-2 {
                margin-top: 15px;

                .project-list {
                    padding: 15px;
                    display: flex;
                    flex-wrap: wrap;
                    background-color: #fff;

                    .project-item {
                        color: $t-color-2;
                        flex-shrink: 0;
                        width: 33.333%;
                        height: 120px;
                        font-size: 14px;
                        cursor: pointer;

                        .saasIcon {
                            color: $t-color-2;
                            margin-bottom: 5px;
                            font-size: 40px;
                        }

                        &.move {
                            background-color: rgba(249, 249, 249, 1);
                            border-width: 1px;
                            border-style: solid;
                            border-color: rgba(228, 228, 228, 1);
                            border-radius: 0px;
                        }
                    }
                }
            }

            .right-3 {
                margin-top: 15px;

                .new-list {
                    height: 411px;
                    overflow-y: auto;
                    padding: 15px;
                    background-color: #fff;

                    .new-item {
                        width: 100%;
                        cursor: pointer;
                        height: 50px;

                        .left {
                            max-width: 200px;
                            color: $t-color-1;
                            font-size: 14px;
                        }

                        .right {
                            color: $t-color-2;
                            font-size: 12px;
                        }
                    }
                }
            }
        }
    }
}
</style>
